import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { OneMapService } from '../one-map.service';
import { DatePipe } from '@angular/common';
import { UtilService } from 'src/app/core/util/util.service';

@Component({
  selector: 'app-monitor-gate',
  templateUrl: './monitor-gate.component.html',
  styleUrls: ['./monitor-gate.component.scss']
})
export class MonitorGateComponent implements OnChanges {
  @Input() data: any;
  beginDate: Date = new Date(+new Date() - 1 * 24 * 60 * 60 * 1000);
  endDate: Date = new Date();
  pageSize: number = 2000;
  // tabs: any[] = [
  //   "闸门状态",
  //   "水位流量过程线",
  //   "开度过程线"
  // ];
  // activeIdx: number = 0;
  strobeNum: number = 0;
  gateHeight: number = 3;
  processOpt: any = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "#505765"
        }
      }
    },
    legend: {
      data: ["闸前水位", "闸后水位", "流量"],
      bottom: 10
    },
    xAxis: {
      type: "category",
      data: []
    },
    yAxis: [
      {
        name: "水位(m)",
        type: "value"
      },
      {
        name: "流量(m³/s)",
        type: "value"
      }
    ],
    series: [
      {
        name: "闸前水位",
        type: "line",
        smooth: true,
        data: []
      },
      {
        name: "闸后水位",
        type: "line",
        smooth: true,
        data: []
      },
      {
        name: "流量",
        type: "line",
        yAxisIndex: 1,
        smooth: true,
        data: []
      }
    ]
  };
  processOptChange: any = {};
  degreeOpt: any = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "#505765"
        }
      }
    },
    grid: {
      top: "8%",
      left: "4%",
      right: 0,
      bottom: 0,
      containLabel: true
    },
    legend: {
      data: [],
      bottom: 10
    },
    xAxis: {
      type: "category",
      data: []
    },
    yAxis: [
      {
        name: "开度(m)",
        type: "value"
      }
    ],
    series: [
      {
        name: "闸1",
        type: "line",
        smooth: true,
        data: []
      }
    ]
  };
  degreeOptChanges: any[] = [];
  dataList: any[] = [];
  // 闸前水位1 闸后水位2 流量3 闸门开启高度4

  constructor(private mapService: OneMapService, private datePipe: DatePipe, private util: UtilService) { }

  ngOnChanges(): void {
    console.log(this.data);

    this.initData();
  }

  initData() {
    const mapper = {};
    const dataList = [];
    // 闸前水位1 闸后水位2 流量3 闸门开启高度4
    const attrs = ['', 'heightUp', 'heightDown', 'flux', 'degree'];
    this.mapService.queryProcessGate({
      strobeCode: this.data.strobeCode,
      beginTime: this.datePipe.transform(this.beginDate, "yyyy-MM-dd"),
      endTime: this.datePipe.transform(this.endDate, "yyyy-MM-dd")
    }).subscribe((list: any[]) => {
      list.map((item: any) => {
        const type = Number(item.type);
        if (!mapper[item.time]) {
          mapper[item.time] = {
            ...item,
            heightUp: '',
            heightDown: '',
            flux: '',
            degree: []
          };
        }
        if (type == 4) {
          mapper[item.time][attrs[item.type]][item.num - 1] = item.val;
        } else {
          mapper[item.time][attrs[item.type]] = item.val;
        }
      });
      for (const key in mapper) {
        if (mapper.hasOwnProperty(key)) {
          const data = mapper[key];
          dataList.push(data);
        }
      }
      this.dataList = dataList;
      // this.gateStatus = dataList[dataList.length - 1] || {};
      this.strobeNum = this.data.degree && this.data.degree.length;
      this.degreeOptChanges = new Array(this.strobeNum);
      this.renderProcess();
    });
  }

  onSelectChange(e) {
    // this.activeIdx = e.index;
    this.initData();
  }

  onChange(dates) {
    this.beginDate = dates[0];
    this.endDate = dates[1];
  }

  renderProcess() {
    const degreeList = [];
    for (let i = 0; i < this.strobeNum; i++) {
      degreeList[i] = [];
      this.dataList.map(data => {
        degreeList[i].push(data.degree[i]);
      });
      this.degreeOptChanges[i] = {
        legend: {
          data: `${i + 1}#`
        },
        xAxis: [
          {
            data: this.util.getTimeItems(this.dataList, "time")
          }
        ],
        series: [
          {
            name: `${i + 1}#`,
            type: "line",
            smooth: true,
            data: degreeList[i]
          }
        ]
      };
    }
    this.degreeOptChanges = [...this.degreeOptChanges];
    this.processOptChange = {
      xAxis: [
        {
          data: this.util.getTimeItems(this.dataList, "time")
        }
      ],
      series: [
        {
          data: this.util.getItemValues(this.dataList, "heightUp", true)
        },
        {
          data: this.util.getItemValues(this.dataList, "heightDown", true)
        },
        {
          data: this.util.getItemValues(this.dataList, "flux", true)
        }
      ]
    };
  }
}
